<template>
  <div class="announcementList same-change-oldstyle">
    <div class="same-head-box">
      <div class="saem-seat-box">
        <div class="saem-seat-left">
          <span>当前位置：</span>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>公告管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="saem-seat-right">
          <button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
          <button class="same-search-btns" @click="returnBack">返回</button>

        </div>
      </div>
    </div>
    <div class="informshow">
      <div class="same-search-left">
        <div class="same-left-one">
          <span class="same-search-span same-search-fisrt">更新时间：</span>
          <el-date-picker style="width:140px" v-model="date1" type="date" size="medium" value-format="yyyy-MM-dd"
            placeholder="开始日期"></el-date-picker>
          <div class="same-interval">至</div>
          <el-date-picker style="width:140px" v-model="date2" type="date" size="medium" value-format="yyyy-MM-dd"
            placeholder="结束日期"></el-date-picker>
        </div>
        <div class="same-left-one">
          <el-button type="primary" size="medium"  @click="search()">搜索</el-button>
          <el-button type="info" size="medium" @click="reset()">重置</el-button>
        </div>
      </div>

      <div class="announcementBox">
        <div class="table_box">

          <div class="common-table-outer">
            <el-table class="common-table" v-loading="loading" header-cell-class-name="common-table-header-cell"
              :data="table_Data" stripe>
              <el-table-column header-align="center" width="70" align="center" label="序号">
                <template slot-scope="scope">
                  {{scope.$index+1+(currentPage-1)*pageSize}}
                </template>
              </el-table-column>
              <el-table-column align="center" prop="title" label="标题">
              </el-table-column>

              <el-table-column align="center" prop="author" label="创建人">
              </el-table-column>

              <el-table-column align="center" prop="ctime" label="日期">
              </el-table-column>

              <el-table-column align="center" prop="address" label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" @click="lookDetail(scope.row.id)">查看</el-button>
                </template>
              </el-table-column>
              <template slot="empty" v-if="isLoad">
                <div class="new-no-data-show">
                  <img src="../../assets/images/no-data.png" alt="">
                  <div>暂无相关数据</div>
                </div>
              </template>
            </el-table>

            <div class="same-page-inShow" v-if="table_Data.length>0 && isLoad">
              <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="pageSizesList" :page-size="pageSize"
                layout="total, prev, pager, next, jumper ,sizes" :total="totalDataNumber"></el-pagination>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "announcementList",
    data: function () {
      return {
        pageSize: 15,
        pageSizesList: [15, 30, 40, 50],
        totalDataNumber: 0, // 数据的总数,-----
        table_Data: [],
        multipleSelection: [],
        currentPage: 1, //当前页数
        loading: false, //加载动画
        date1: "",
        date2: "",
        isLoad: false
      };
    },
    computed: {},
    // 初始化执行
    created: function () {
      this.$emit('gitHidden', true);//是否隐藏底部版权 true 隐藏 
      this.noticelist(this.currentPage, this.pageSize); // 获取设备列表数据
    },
    inject: ["reload"],
    methods: {
      RefreshFun() {
        // 调用reload方法，刷新整个页面
        this.reload();
      },
      //返回
      returnBack() {
        this.$router.back(-1);
      },
      search() {
        this.currentPage = 1;
        this.noticelist(this.currentPage, this.pageSize); // 获取设备列表数据
      },
      reset() {
        this.date1 = "";
        this.date2 = "";
        this.currentPage = 1;
        this.noticelist(this.currentPage, this.pageSize);
      },
      //点击查看 传值ID过去
      lookDetail(textId) {
        this.$router.push({ path: "/announcementDetail", query: { id: textId } });
      },
      //每页
      handleSizeChange(val) {
        this.pageSize = val; // 当前每页显示条数
        this.currentPage = 1;
        this.noticelist(this.currentPage, this.pageSize);
      },
      //分页
      handleCurrentChange(val) {
        this.currentPage = val;
        this.noticelist(this.currentPage, this.pageSize);
      },
      // 获取公告列表数据
      noticelist: function (page, pageSize) {
        this.loading = true; //打开loading动画
        this.isLoad = false; //是否加载
        var that = this;
        // ajax请求
        that.$post({
          url: "Partner/Article/noticeList",
          data: {
            cid: 4,
            page: page,
            row: pageSize,
            start_time: that.date1 ? that.date1 : "",
            end_time: that.date2 ? that.date2 : ""
          },
          success: data => {
            that.isLoad = true;
            that.loading = false; //关闭动画
            if (data.code == 1000) {
              that.table_Data = data.data.data;
              that.totalDataNumber = Number(data.data.count); // 总的数据
            } else {
              that.table_Data = [];
              that.totalDataNumber = 0;
            }
          }
        });
      },
      //删除
      opendelete() {
        this.$confirm("此操作将永久删除选中文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      }
    },
    mounted() { }
  };
</script>
<style scoped>
  .announcementList {
    width: 100%;
    height: 100%;
    background: #fff;
  }

  .announcementList .same-search-left {
    padding-top: 10px;
  }

  .announcementList .informshow {
    display: flex;
    flex-direction: column;
    margin: 15px 40px;
  }
</style>